<template>
  <div class="login-container">
    <div class="background-shapes">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="shape shape-3"></div>
      <div class="shape shape-4"></div>
    </div>
    <div class="login-card">
      <div class="login-header">
        <div class="logo-container">
          <el-icon class="logo-icon"><Connection /></el-icon>
          <span class="logo-text">JobLinker</span>
        </div>
        <h1 class="title">欢迎回来</h1>
        <p class="subtitle">登录您的JobLinker账号，开启职业之旅</p>
      </div>

      <el-form 
        :model="loginForm" 
        :rules="loginRules" 
        ref="loginFormRef" 
        @submit.prevent="handleLogin" 
        class="login-form"
      >
        <el-form-item prop="username">
          <el-input 
            v-model="loginForm.username" 
            placeholder="用户名/邮箱" 
            :prefix-icon="User"
            size="large"
          />
        </el-form-item>
        
        <el-form-item prop="password">
          <el-input 
            v-model="loginForm.password" 
            type="password" 
            placeholder="密码" 
            :prefix-icon="Lock"
            show-password
            size="large"
          />
        </el-form-item>
        
        <el-button 
          type="primary" 
          native-type="submit" 
          class="submit-btn" 
          :loading="loading"
          size="large"
        >
          登录
        </el-button>
      </el-form>

      <!-- 快速演示账号登录区域 -->
      <div class="demo-accounts">
        <div class="divider">
          <span>快速体验</span>
        </div>
        <p class="demo-tip">点击按钮，使用演示账号直接体验系统</p>
        <div class="demo-buttons">
          <el-button 
            class="demo-btn job-seeker" 
            @click="loginWithDemo('jobseeker')"
            :loading="loading && loginForm.username === demoAccounts.jobseeker.username"
            :disabled="loading"
          >
            <el-icon><UserFilled /></el-icon>
            {{ loading && loginForm.username === demoAccounts.jobseeker.username ? '登录中...' : '求职者' }}
          </el-button>
          <el-button 
            class="demo-btn recruiter" 
            @click="loginWithDemo('recruiter')"
            :loading="loading && loginForm.username === demoAccounts.recruiter.username"
            :disabled="loading"
          >
            <el-icon><Briefcase /></el-icon>
            {{ loading && loginForm.username === demoAccounts.recruiter.username ? '登录中...' : '招聘者' }}
          </el-button>
          <el-button 
            class="demo-btn admin" 
            @click="loginWithDemo('admin')"
            :loading="loading && loginForm.username === demoAccounts.admin.username"
            :disabled="loading"
          >
            <el-icon><Setting /></el-icon>
            {{ loading && loginForm.username === demoAccounts.admin.username ? '登录中...' : '管理员' }}
          </el-button>
        </div>
      </div>

      <div class="register-prompt">
        <span>还没有账号?</span>
        <router-link to="/auth/register" class="register-link">
          立即注册
          <el-icon><ArrowRight /></el-icon>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, Lock, ChatDotRound, Phone, ArrowRight, Connection, UserFilled, Briefcase, Setting } from '@element-plus/icons-vue'
import { login } from '@/api/auth'

const router = useRouter()
const route = useRoute()
const loading = ref(false)
const loginFormRef = ref(null)

const loginForm = reactive({
  username: '',
  password: ''
})

// 演示账号配置
const demoAccounts = {
  jobseeker: {
    username: 'zhangsan',  // 求职者演示账号用户名
    password: '123456'       // 对应密码
  },
  recruiter: {
    username: 'xiaolei',         // 使用已确认存在的招聘者账号
    password: '123456'           // 对应密码
  },
  admin: {
    username: 'admin',           // 管理员演示账号
    password: '123456'      // 对应密码
  }
}

// 演示账户功能描述
const demoFeaturesInfo = {
  jobseeker: '您可以浏览职位、提交简历、查看应聘进度、参与面试',
  recruiter: '您可以发布职位、筛选简历、管理面试、查看数据统计',
  admin: '您可以审核企业信息、管理所有用户、查看系统数据、配置系统参数'
}

// 使用演示账号登录
const loginWithDemo = async (type) => {
  if (loading.value) return
  
  loading.value = true
  
  const account = demoAccounts[type]
  let roleText = '未知'
  
  // 根据账号类型设置角色文本
  if (type === 'jobseeker') {
    roleText = '求职者'
  } else if (type === 'recruiter') {
    roleText = '招聘者'
  } else if (type === 'admin') {
    roleText = '管理员'
  }
  
  try {
    // 填充表单
    loginForm.username = account.username
    loginForm.password = account.password
    
    ElMessage.info(`正在使用${roleText}演示账号登录...`)
    
    // 直接调用登录API，而不是通过handleLogin
    const res = await login(loginForm)
    
    ElMessage.success(`${roleText}演示账号登录成功`)
    
    // 设置一个小延迟，让用户看到成功消息
    setTimeout(() => {
      // 提示用户当前使用的是演示账号
      ElMessage({
        message: `您正在使用${roleText}演示账号，${demoFeaturesInfo[type]}`,
        type: 'info',
        duration: 6000
      })
      
      // 跳转到首页或者指定页面
      const redirectPath = route.query.redirect || '/'
      router.push(redirectPath)
    }, 500)
  } catch (error) {
    console.error('演示账号登录失败', error)
    
    if (error.response && error.response.data) {
      ElMessage.error(error.response.data.message || `${roleText}演示账号登录失败`)
    } else {
      ElMessage.error(`${roleText}演示账号登录失败，请检查网络连接`)
    }
  } finally {
    loading.value = false
  }
}

const loginRules = {
  username: [
    { required: true, message: '请输入用户名/邮箱', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
}

const handleLogin = async () => {
  if (!loginFormRef.value) return
  
  try {
    await loginFormRef.value.validate()
    loading.value = true
    
    try {
      const res = await login(loginForm)
      
      // 保存登录信息到本地存储在login函数中已处理
      
      ElMessage.success('登录成功')
      
      const redirectPath = route.query.redirect || '/'
      router.push(redirectPath)
    } catch (error) {
      console.error('登录失败', error)
      if (error.response && error.response.data) {
        ElMessage.error(error.response.data.message || '登录失败，请检查用户名和密码')
      } else {
        ElMessage.error(error.message || '登录失败，请检查网络连接')
      }
    } finally {
      loading.value = false
    }
  } catch (formError) {
    console.error('表单验证失败', formError)
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
  padding: 0;
  overflow-y: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.background-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
  animation: float 15s infinite ease-in-out;
}

.shape-1 {
  width: 500px;
  height: 500px;
  top: -150px;
  right: -100px;
  background: radial-gradient(circle at center, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.1));
  animation-delay: 0s;
}

.shape-2 {
  width: 300px;
  height: 300px;
  bottom: -50px;
  left: -50px;
  background: radial-gradient(circle at center, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.1));
  animation-delay: 2s;
}

.shape-3 {
  width: 200px;
  height: 200px;
  top: 30%;
  left: 20%;
  background: radial-gradient(circle at center, rgba(249, 115, 22, 0.2), rgba(249, 115, 22, 0.05));
  animation-delay: 4s;
}

.shape-4 {
  width: 400px;
  height: 400px;
  bottom: 10%;
  right: 10%;
  background: radial-gradient(circle at center, rgba(124, 58, 237, 0.2), rgba(124, 58, 237, 0.05));
  animation-delay: 6s;
}

@keyframes float {
  0% {
    transform: translateY(0) translateX(0) rotate(0);
  }
  33% {
    transform: translateY(-20px) translateX(10px) rotate(5deg);
  }
  66% {
    transform: translateY(10px) translateX(-10px) rotate(-5deg);
  }
  100% {
    transform: translateY(0) translateX(0) rotate(0);
  }
}

.login-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  padding: 2rem;
  width: 100%;
  max-width: 450px;
  animation: slideUp 0.8s ease-out;
  margin: auto;
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  
  .logo-icon {
    font-size: 2.5rem;
    color: #3b82f6;
    margin-right: 0.5rem;
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
  }
  
  .logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3b82f6;
    letter-spacing: -0.5px;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--el-text-color-primary);
  margin-bottom: 0.5rem;
}

.subtitle {
  color: var(--el-text-color-secondary);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.login-form {
  margin-bottom: 1.5rem;

  :deep(.el-input__wrapper) {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    transition: all 0.3s ease;

    &:hover, &:focus-within {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.forgot-link {
  color: var(--el-color-primary);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.3s ease;

  &:hover {
    color: var(--el-color-primary-light-3);
  }
}

.submit-btn {
  width: 100%;
  height: 44px;
  font-size: 1rem;
  border-radius: 8px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.5);
  }
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1.5rem 0;
  color: var(--el-text-color-secondary);

  &::before,
  &::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--el-border-color-lighter);
  }

  span {
    padding: 0 1rem;
    font-size: 0.9rem;
  }
}

.social-login {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;

  .social-btn {
    flex: 1;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;

    &.wechat {
      background: #07c160;
      color: white;
      border: none;
      box-shadow: 0 4px 10px rgba(7, 193, 96, 0.3);

      &:hover {
        background: darken(#07c160, 5%);
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(7, 193, 96, 0.4);
      }
    }

    &.phone {
      background: #f9fafb;
      color: var(--el-text-color-primary);
      border: 1px solid var(--el-border-color);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

      &:hover {
        border-color: var(--el-color-primary);
        color: var(--el-color-primary);
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
      }
    }
  }
}

.demo-accounts {
  margin-bottom: 1.5rem;
  
  .demo-tip {
    text-align: center;
    color: var(--el-text-color-secondary);
    font-size: 0.9rem;
    margin: 0.5rem 0 1rem;
  }
}

.demo-buttons {
  display: flex;
  gap: 0.75rem;
  
  .demo-btn {
    flex: 1;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0 0.5rem;
    
    .el-icon {
      font-size: 1rem;
    }
    
    &.job-seeker {
      background: #10b981;
      color: white;
      border: none;
      box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);

      &:hover:not(:disabled) {
        background: darken(#10b981, 5%);
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(16, 185, 129, 0.4);
      }
    }

    &.recruiter {
      background: #f59e0b;
      color: white;
      border: none;
      box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);

      &:hover:not(:disabled) {
        background: darken(#f59e0b, 5%);
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(245, 158, 11, 0.4);
      }
    }
    
    &.admin {
      background: #6366f1;
      color: white;
      border: none;
      box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);

      &:hover:not(:disabled) {
        background: darken(#6366f1, 5%);
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(99, 102, 241, 0.4);
      }
    }
    
    &:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }
  }
}

.register-prompt {
  text-align: center;
  color: var(--el-text-color-secondary);
  font-size: 0.95rem;

  .register-link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    margin-left: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.3s ease;

    &:hover {
      color: #2563eb;
      transform: translateX(4px);
    }
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .login-card {
    max-width: 95%;
    padding: 1.5rem;
  }
  
  .demo-buttons {
    flex-wrap: wrap;
    
    .demo-btn {
      padding: 0 0.25rem;
      font-size: 0.9rem;
    }
  }
}

@media (max-width: 480px) {
  .login-container {
    padding: 1rem;
    align-items: center;
  }

  .login-card {
    padding: 1.25rem;
    margin: 0 auto;
    max-width: 100%;
  }

  .social-login {
    flex-direction: column;
  }
  
  .title {
    font-size: 1.5rem;
  }

  .demo-buttons {
    flex-direction: column;
    gap: 0.75rem;
    
    .demo-btn {
      height: 40px;
      font-size: 0.9rem;
    }
  }
  
  .demo-tip {
    font-size: 0.8rem !important;
    margin: 0.4rem 0 0.8rem !important;
  }
  
  .divider span {
    font-size: 0.8rem;
    padding: 0 0.5rem;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .demo-buttons {
    flex-wrap: wrap;
    
    .demo-btn {
      min-width: calc(50% - 0.375rem);
      
      &.admin {
        flex-basis: 100%;
        margin-top: 0.5rem;
      }
    }
  }
}

@media (max-width: 380px) {
  .login-card {
    padding: 1rem;
  }
  
  .demo-buttons .demo-btn {
    font-size: 0.8rem;
    height: 38px;
  }
  
  .title {
    font-size: 1.4rem;
  }
  
  .subtitle {
    font-size: 0.85rem;
  }
}
</style> 